<script setup>
import { _$, $, to } from "./index";
import { useCurrentUserStore } from "@/stores/currentUser";
import { storeToRefs } from "pinia";
const store = useCurrentUserStore();
const { headImage, name } = storeToRefs(store);
const uploadServerUrl = `${import.meta.env.VITE_API_SERVER}`;
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding: 20px,0,0,0">
        <el-menu
          :default-active="_$.state.activeIndex"
          class="header-right"
          style="flex: 1"
          mode="horizontal"
          background-color="#FFAB4E"
          text-color="#2C3E50"
          active-text-color="#F5F5F5"
          router
          :ellipsis="false"
          @select="$.onChangeMenu"
        >
          <el-menu-item index="#">
            <img
              src="@/assets/imgs/logo.png"
              style="width: 35px; height: 35px"
            />
            <h2>个人健康档案与饮食推荐管理系统</h2>
          </el-menu-item>
          <el-menu-item index="/portal/home">首页</el-menu-item>
          <el-menu-item index="/portal/recipe">食谱搜索</el-menu-item>
          <el-menu-item index="/portal/health-data-view"
            >健康数据可视化</el-menu-item
          >
          <el-menu-item index="/portal/health-data">健康数据管理</el-menu-item>
          <el-menu-item index="/portal/health-record"
            >体检记录管理</el-menu-item
          >
          <el-menu-item index="/portal/news">资讯</el-menu-item>
          <div class="flex-grow" />
          <el-sub-menu index="/center">
            <template #title>
              <el-space wrap class="w-fill" :size="10">
                <el-avatar :src="`${uploadServerUrl}${headImage}`" />
                <el-text type="info">{{ name }}</el-text>
              </el-space>
            </template>
            <el-menu-item index="/portal/person/center">个人中心</el-menu-item>
            <el-menu-item index="/portal/person/collection"
              >我的收藏</el-menu-item
            >
            <el-menu-item index="/logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template> 

<style scoped>
</style>
